<template>
	<view class="auto-page" style="background-color: #FFFFFF;box-sizing: border-box;border-top: 2rpx solid #e8e8e8;">
		<view class="f-row f-center" style="position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;z-index: 999;">
			<view class="line-60-30" style="margin-left: -50rpx;">创建时间:</view>
			<view class="line-60-30" style="position: relative;padding-left: 45rpx;">
				<image src="../../static/icons/order-list/down-arrow.png" mode="aspectFill"
					class="arrow-pic"></image>
				<picker mode="date" fields="month" :value="dateValue" @change="datePickChange" :start="startDate" :end="endDate" @cancel="datePickCancel">
					<view class="line-60-30" :style="dateValue == '' ? 'color:#999999':''">{{dateStr}}</view>
				</picker>
			</view>
		</view>
		<view class="f-column f-1" style="top: 60rpx;">
			<view class="item" v-for="(item , index) in data" :key="index">
				<view class="f-column">
					<view class="f-row">
						<view class="title create-time">创建时间</view>
						<view class="content">{{item.create_time}}</view>
					</view>
					<view class="f-row">
						<view class="title">商户名称</view>
						<view class="content">{{item.merchant.mer_name}}</view>
					</view>
					<view class="f-row">
						<view class="title">对账状态</view>
						<view class="content">{{item.status == 1 ? '已拒绝' : (item.status == 2 ? '已确认' : '未确认')}}</view>
					</view>
					<view class="f-row">
						<view class="f-row">
							<view class="title">对账总金额</view>
							<view class="content">{{item.order_price}}</view>
						</view>
						<view class="f-row f-1" style="justify-content: center;">
							<view class="title">总扣除金额</view>
							<view class="content">{{item.order_rate}}</view>
						</view>
					</view>
			
					<view class="f-row">
						<view class="title">开户行</view>
						<view class="content">{{item.bank}}</view>
					</view>
					
					<view class="f-row">
						<view class="title">银行卡卡号</view>
						<view class="content">{{item.bank_number}}</view>
					</view>
					
					<view class="f-row">
						<view class="title">转账状态</view>
						<view class="content">{{item.is_accounts == 0 ? '未转账' : (item.is_accounts == 1 ? '已转账' : '未知状态')}}</view>
					</view>
					<view class="f-row">
						<view class="title">备注</view>
						<view class="content">{{item.admin_mark || '无'}}</view>
					</view>
				</view>
				<view class="operation-menu">
					<view class="operation-button click-opacity" style="background-color: #53A7FF;"
						@click="operateClick('checkorder', item.reconciliation_id ,item)">查看订单</view>
					<view class="operation-button click-opacity" style="background-color: #DF2000;"
						@click="operateClick('confirm', item.reconciliation_id)" v-if="item.status == 0">确认对账</view>
					<view class="operation-button click-opacity" style="border: 2rpx solid #e8e8e8;color: #333333;"
						@click="operateClick('reconfirm', item.reconciliation_id)" v-if="item.status == 0">拒绝对账</view>
					<!-- <view class="operation-button click-opacity" style="background-color: #c8c8c8;" @click="operateClick('remarks', item.reconciliation_id)">备注</view> -->
					<view class="operation-button" style="background-color: #999999;" v-if="item.status !== 0">{{item.status == 1 ? '已拒绝对账' : '已确认对账'}}</view>
				</view>
			</view>
			<loadingmore :statusObject="statusObject" @reload="reload"></loadingmore>
		</view>
	</view>
</template>

<script>
	const date = new Date();
	import { dateStr } from '../../lib/utils.js'
	import loadingmore from '../../components/loading-more.vue'
	import FINANCE from '../../api/finance.js'
	let _this;
	export default {
		components: {
			loadingmore
		},
		data() {
			return {
				data: [],
				statusObject: {status : 0},
				page: 1,
				limit: 4,
				dateValue:'',
			}
		},
		onLoad() {
			_this = this;
			_this.requestData();
		},
		computed: {
			startDate: function() {
				return (date.getFullYear() - 5) + '-01-01';
			},
			endDate: function() {
				return (date.getFullYear() + 5) + '-01-01';
			},
			dateStr: function() {
				if(_this.dateValue == '') return '请选择'
				let arr = _this.dateValue.split('-');
				return arr[0] + '年' + arr[1] + '月';
			}
		},
		onReachBottom() {
			if(_this.statusObject.status !== 3) return;
			_this.requestData();
		},
		methods: {
			reload() {
				_this.data = [];
				_this.page = 1;
				_this.statusObject = { status : 0 }
				_this.requestData();
			},
			requestData() {
				if (_this.statusObject.status == 2) return;
				let date = '';
				if(_this.dateValue !== '') {
					let arr = _this.dateValue.split('-');
					console.log(arr);
					date = dateStr(Number(arr[0]),Number(arr[1]));
					console.log(date);
				}
				FINANCE.storeOrderReconciliationLst({
					page: _this.page,
					limit: _this.limit,
					date: date
				}).then((res) => {
					console.log(res);
					_this.data = _this.data.concat(res.list);
					if(res.count == 0) {
						_this.statusObject = {
							status: 1
						}
					}
					else if (_this.data.length == res.count) {
						_this.statusObject = {
							status: 2
						}
						_this.page += 1;
					} else {
						_this.statusObject = {
							status: 3
						}
						_this.page += 1;
					}
				}).catch((err) => {
					_this.statusObject = {
						status: -1
					}
					console.log(err);
				});
			},
			operateClick(str, id ,data = {}) {
				switch (str) {
					case 'checkorder':
						_this.$navigate('reconciliation-order','switchTab',{ id , data });
						break;
					case 'confirm':
						uni.showModal({
							title: '是否确认对账?',
							confirmText: '确认',
							success: (res) => {
								if (res.confirm) {
									FINANCE.orderReconciliationStatus({
											id: id,
											status: 0
									}).then((res) => {
										_this.$utils.showToast('确认对账成功');
										_this.reload();
									}).catch((err) => {
										_this.$utils.showToast('确认对账失败');
										_this.reload();
									});
								}
							}
						})
						break;
					case 'reconfirm':
						uni.showModal({
							title: '确定拒绝对账?',
							confirmText: '确定',
							success: (res) => {
								if (res.confirm) {
									FINANCE.orderReconciliationStatus({
										id: id,
										status: 1
									}).then((res) => {
										_this.$utils.showToast('拒绝对账成功');
										_this.reload();
										console.log(res);
									}).catch((err) => {
										_this.$utils.showToast('拒绝对账成功');
										_this.reload();
										console.log(err);
									});
								}
							}
						})
						break;
					case 'remarks':
						break;
					default:
						break;
				}
			},
			datePickChange(e) {
				_this.dateValue = e.detail.value;
				_this.reload();
			},
			datePickCancel(e) {
				_this.dateValue = '';
				_this.reload();
			}
		}
	}
</script>

<style>
	.item {
		display: flex;
		flex-direction: column;
		position: relative;
		border-top: 2rpx solid #e8e8e8;
		border-bottom: 2rpx solid #e8e8e8;
		margin: 15rpx 0;
		padding: 0 30rpx;
	}
	
	.item:first-child {
		margin-top: 0;
	}

	.title {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		width: 150rpx;
		padding-left: 30rpx;
	}

	.title::after {
		content: "：";
		font-size: 20rpx;
	}

	.content {
		line-height: 50rpx;
		font-size: 22rpx;
	}

	.operation-menu {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 15rpx 0;
	}

	.operation-button {
		padding: 0 15rpx;
		min-width: 120rpx;
		height: 50rpx;
		border-radius: 16rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
		border: 2rpx solid transparent;
	}

	.create-time::before {
		content: "";
		width: 2rpx;
		border-left: 16rpx solid #1a66ff;
		height: 50rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.line-60-30{
		line-height: 60rpx;
		height: 60rpx;
		font-size: 26rpx;
	}
	
	.arrow-pic {
		height: 20rpx;
		width: 20rpx;
		position: absolute;
		left: 15rpx;
		top: 50%;
		margin-top: -10rpx;
	}
	
	.rotate {
		animation: rotate .15s linear forwards;
	}
	
	@keyframes rotate {
		from {
			transform: rotate(0);
		}
	
		to {
			transform: rotate(180deg);
		}
	}
</style>
